<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Contact</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="Motel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"
          name="keywords"/>
    <nav th:replace="include/import::import"></nav>
    <style>
        .contact {
            width: 86%;
            margin: auto;
        }
    </style>
    <!--    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>-->
    <!--    <script>-->
    <!--        function orderMassage() {-->
    <!--            var tr = $("#order tr"); // 获取table中每一行内容-->
    <!--            var result = []; // 数组-->
    <!--            for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容-->
    <!--                var tds = $(tr[i]).find("td");-->
    <!--                if (tds.length-1 > 0) {-->
    <!--                    result.push({-->
    <!--                        "orderId" : $(tds[0]).find("orderId").val(),-->
    <!--                        "username" : $(tds[1]).find("username").val(),-->
    <!--                        "phone" : $(tds[2]).find("phone").val(),-->
    <!--                        "roomCode" : $(tds[3]).find("roomCode").val(),-->
    <!--                        "hotelName" : $(tds[4]).find("hotelName").val(),-->
    <!--                        "price" : $(tds[5]).find("price").val(),-->
    <!--                    })-->
    <!--                }-->
    <!--            }-->
    <!--            var jsonData = { // json数据-->
    <!--                "orderList" : result-->
    <!--            }-->
    <!--            $.ajax({-->
    <!--                type: "post",-->
    <!--                url: "/order",-->
    <!--                contentType: "application/json;charset=UTF-8",-->
    <!--                data: JSON.stringify(jsonData),// 将json数据转化为字符串-->
    <!--                success: function (data) {-->
    <!--                    alert("成功")-->
    <!--                }-->
    <!--            })-->
    <!--        }-->
    <!--    </script>-->
    <script>
        function deleteOrder(elem, id) {
            $.get('/delete?orderId=' + id, function () {
                // console.log("已删除")
                $(elem).parent().parent().parent().remove();
            })
        }
    </script>
</head>
<body>
<!-- banner -->
<nav th:replace="/include/top :: top"></nav>
<!--start-contact-->
<!--利用bootstrap限定范围-->
<div class="contact">            <!--表格-->
    <!--table-bordered:为所有表格的单元格添加边框  table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)-->
    <table class="table table-bordered table-striped" id="order">
        <tr>
            <th>订单号</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>酒店名</th>
            <th>价格</th>
            <th>支付状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="order:${orders}">
            <td th:text="${order.orderId}" id="orderId"></td>
            <td th:text="${order.username}" id="username"></td>
            <td th:text="${order.phone}" id="phone"></td>
            <td th:text="${order.hotelName}" id="hotelName"></td>
            <td th:text="${order.price}" id="price"></td>
            <td th:text="${order.ifPay}" id="ifPay"></td>
            <td><span>
                <a th:href="|/order?orderId=${order.orderId}&hotelId=${order.hotelId}|">
                    <input type="button" value="详情" style="width: 50px;padding: auto">
                </a>
                <a th:if="${order.ifPay!='已支付'}" th:href="|/pay?orderId=${order.orderId}&price=${order.price}|">
                    <input type="button" value="付款" style="width: 50px;padding: auto"></a>
                <input type="button" value="取消" th:onclick="|deleteOrder(this,${order.orderId})|"
                       style="width: 50px;padding: auto"></a>
            </span>
            </td>
            <!--                &lt;!&ndash;btn-primary:原始按钮样式（未被操作） btn-xs:	制作一个超小按钮&ndash;&gt;-->
            <!--                <a class="btn btn-primary btn-xs" href="">-->
            <!--                    &lt;!&ndash;glyphicon:字体图标&ndash;&gt;-->
            <!--                    <span class="glyphicon glyphicon-info-sign"></span> 详情 </a>-->
            <!--                <a class="btn btn-info btn-xs" href="">-->
            <!--                    <span class="glyphicon glyphicon-edit"></span> 编辑 </a>-->
            <!--                <a class="btn btn-danger btn-xs" href=""> <span-->
            <!--                        class="glyphicon glyphicon-remove"></span> 删除 </a></td>-->
        </tr>
    </table>

    <div class="text-center">
        <!--分页链接-->
        <!--pagination：分页-->
        <ul class="pagination pagination-sm">
            <li th:if="${pageinfoOrder.hasPreviousPage}"><a
                    th:href="@{'/queryOrders?pn='+${pageinfoOrder.pageNum-1}  }"><span>&laquo;</span></a></li>
            <li th:if="${!pageinfoOrder.hasPreviousPage}" class="active"><a th:href="@{'#'}"><span>&laquo;</span></a>
            </li>


            <li th:each="page:${pageinfoOrder.navigatepageNums}">
                <a class="active" href="#" th:text="${page}" th:if="${page==pageinfoOrder.pageNum}"></a>
                <a th:href="@{'/queryOrders?pn='+${page}}" th:text="${page}" th:if="${page!=pageinfoOrder.pageNum}"></a>
            </li>

            <li th:if="${pageinfoOrder.hasNextPage}"><a
                    th:href="@{'/queryOrders?pn='+${pageinfoOrder.pageNum+1}}"><span>&raquo;</span></a></li>
            <li th:if="${!pageinfoOrder.hasNextPage}" class="active"><a th:href="@{'#'}"><span>&raquo;</span></a></li>
        </ul>
    </div>

</div>

<!--end-map-->
<nav th:replace="include/footer::footer"></nav>
</body>

</html>